﻿@attribute [JSCustomElement]
@inject NavigationManager NavigationManager
@inject IJSRuntime JSRuntime

<div class="pb-4">
    @if (Model is not null)
    {
        <MLazy MinHeight="40">
            <MTabs @bind-Value="_tabValue" @bind-Value:after="OnTabChanged" Height="40" SliderColor="secondary">
                @foreach (var tab in Model.Keys)
                {
                    <MTab Class="text-none" Value="tab">@tab</MTab>
                }
            </MTabs>
        </MLazy>

        <MTabsItems Value="_tabValue">
            @foreach (var (tab, tabItem) in Model)
            {
                <MTabItem Value="@tab">
                    <Markup Code="@tabItem.Code"
                            Language="@tabItem.Lang"
                            FileName="@tabItem.FileName"
                            RoundedTop0
                            LineHighlights="@tabItem.LineHighlights">
                    </Markup>
                </MTabItem>
            }
        </MTabsItems> 
    }
</div>

@code {

    [Parameter]
    public Dictionary<string, MarkupModel>? Model { get; set; }

    [Parameter] public string? Tab { get; set; }

    private StringNumber? _tabValue;

    protected override void OnParametersSet()
    {
        base.OnParametersSet();

        if (Tab != null && _tabValue != Tab)
        {
            _tabValue = Tab;
        }
    }

    private void OnTabChanged()
    {
        _ = JSRuntime.InvokeVoidAsync("updateAppCodeGroup", _tabValue?.ToString());
    }

    public record MarkupModel(string Code, string Lang, string? FileName, string? LineHighlights);
}
